<template>
  <view class="goods-group-container">
    <!-- 遮罩 -->
    <view class="goods-mask" v-if="mask">
      <!-- <u-loading mode="flower" size="100"></u-loading> -->
    </view>

    <!-- 主内容 -->
    <view class="content">
      <!-- 商品展示 -->
      <view class="goods-group-main">
        <!--  假 -->
        <view
          v-if="list.length == 0 && !initSwiper"
          class="group-ske small-ske"
        >
          <skeleton-group></skeleton-group>
        </view>
        <swiper
          class="swiper-goods-group"
          :current="swiperCurrent"
          :circular="true"
          @transition="transition"
          @animationfinish="animationfinish"
          @change="onChange"
          :duration="duration"
          :hidden="!initSwiper"
          v-else
        >
          <swiper-item
            class="swiper-item"
            v-for="(page, key0) in 3"
            :key="key0"
          >
            <view class="list" v-if="swiperCurrent == key0">
              <scroll-view
                class="goods-scroll"
                scroll-y
                :scroll-with-animation="true"
                :scroll-top="scrollLeft"
                @scrolltolower="onreachBottom"
              >
                <view class="goods-list">
                  <card-group
                    class="card-good"
                    v-for="(item, index) in list"
                    :key="index"
                    :probability="probability"
                    @tap="onClickOperate($event, 'look', item.goods_id)"
                    :details="item"
                  ></card-group>
                </view>
              </scroll-view>
            </view>
            <skeleton-group v-else></skeleton-group>
          </swiper-item>
        </swiper>
      </view>
    </view>
  </view>
</template>
<script>
/** //商品列表 箱子切换
 * @property {Object} height 组件高度 当前 商品主体轮播图高度
 * @property {Object} currentBox 当前箱子信息
 * @property {Number} total 箱子总数
 * @method transition 轮播动画开始
 * @method direction 轮播动画方向触发
 * @method finish 轮播动画结束
 * @method open 换箱按钮点击打开
 * @method change 箱子切换触发
 */

import CardGroup from './live-card-good.vue';
import SkeletonGroup from './live-skeleton-group.vue';

import tools from '@/shopro/utils/tools';
const _delay = tools.delayDither(100);
export default {
  // 建议 创建每个组件时 都添加name属性 标识组件名称
  name: '',
  components: { CardGroup, SkeletonGroup },
  props: {
    height: {
      type: Object,
      default: () => ({}),
    },
    currentBox: {
      type: Object,
      default: () => ({}),
    },
    probability: {
      type: Boolean,
      default: false,
    },
    total: {
      type: [String, Number],
      default: 0,
    },
  },
  data: () => ({
    scrollLeft: 0,
    old_scrollLeft: 1,

    // 当前 切换值
    current: 1,
    // swiper组件的current值，表示当前那个swiper-item是活动的
    swiperCurrent: 1,
    // normal 正常 get 获取数据 render获取完毕
    status: 'normal',
    duration: 200,
    // 展示列表
    goods: { name: '原来' },
    // swipering swiperend
    swiperStatus: 'swiperend',
    // 方向
    direction: '',
    // 方向区间
    swiperAxis: [],
    // 是否在切换中
    switching: false,
    // 遮罩 禁止触碰
    mask: true,
    // 初次展示
    initSwiper: false,
  }),
  // 计算属性 适配者模式
  computed: {
    power() {
      return (
        100 -
        (this.currentBox.box_num.surplus / this.currentBox.box_num.total) * 100
      );
    },
    list() {
      return this.currentBox?.box_goods?.list || [];
    },
    // groupHeight() {
    //   return this.height.style;
    // },
    // goodListHeight() {
    //   return `calc(100vh - ${this.height.height}px - 180rpx)`;
    // },
    location() {
      return 1;
    },
  },
  // 数据监听
  watch: {},
  /**
   * 生命周期 类似 发布订阅者模式
   * 在实例初始化之前被调用
   */
  beforeCreate() {},
  // 在实例创建完成后被立即调用
  created() {
    this.current = this.location;
    this.swiperCurrent = this.location;
    this.initSwiper = true;
    // 挂载
    uni.$on('nextBox', (e) => {
      this.onNext();
    });
    uni.$on('previousBox', (e) => {
      this.onPrevious();
    });
  },
  // 在挂载开始之前被调用
  beforeMount() {},
  // 挂载到实例上去之后调用。详见 注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用nextTick
  mounted() {
    this.mask = false;
  },
  // 数据更新时调用，发生在虚拟 DOM 打补丁之前
  beforeUpdate() {},
  // 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子
  updated() {},
  // 实例销毁之前调用。在这一步，实例仍然完全可用
  beforeDestroy() {
    // 销毁
    uni.$off('nextBox');
    uni.$off('previousBox');
  },
  // Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
  destroyed() {},
  methods: {
    /**
     *  页面点击事件 防抖
     * @param {Object} ev  $event
     * @param {String} name 执行名称
     * @param {Object} data 传值
     */
    onClickOperate(ev, name, data = {}) {
      _delay(() => {
        switch (name) {
          // next
          case 'next':
            this.onNext(data);
            break;
          // previous
          case 'previous':
            this.onPrevious(data);
            break;
          // look
          case 'look':
            this.lookDetailsMod(data);
            break;
        }
      });
    },
    lookDetailsMod(ev) {
      this.$emit('look', ev);
    },
    // 监听滚动条
    onScroll(e) {
      this.old_scrollLeft = e.detail.scrollTop;
    },
    // swiper-item左右移动，通知tabs的滑块跟随移动
    transition(e) {
      if (this.status == 'normal' && this.swiperStatus != 'swipering') {
        this.$emit('transition', { type: 'transition' });
      }

      if (this.swiperAxis.length < 2) {
        this.swiperAxis.push(e.detail.dx);
        this.checkDirection(this.swiperAxis.length);
      }
      if (this.swiperStatus != 'swipering') {
        this.swiperStatus = 'swipering';
      }
    },
    // 检测操作方向
    checkDirection(axis) {
      if (axis == 2) {
        this.direction =
          this.swiperAxis[0] > this.swiperAxis[1] ? 'previous' : 'next';
        this.$emit('direction', { type: this.direction });
      }
    },

    onNext() {
      if (this.swiperCurrent == 2) {
        this.swiperCurrent = 0;
      } else {
        this.swiperCurrent = this.swiperCurrent + 1;
      }
    },

    onPrevious() {
      if (this.swiperCurrent == 0) {
        this.swiperCurrent = 2;
      } else {
        this.swiperCurrent = this.swiperCurrent - 1;
      }
    },

    // 当 切换箱子时
    onChange(e) {
      this.scrollLeft = this.old_scrollLeft;
      setTimeout(() => {
        this.running();
      }, 66);
    },
    // 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
    // swiper滑动结束，分别设置tabs和swiper的状态
    animationfinish(e) {
      this.swiperStatus = 'swiperend';
      let current = e.detail.current;
      this.swiperCurrent = current;
      this.current = current;
      this.scrollLeft = 0;
      this.swiperAxis = [];
      this.direction = '';

      this.rendering().then(() => {
        this.status = 'normal';
      });
    },
    // scroll-view到底部加载更多
    onreachBottom() {},

    // 获取数据
    getData() {
      this.status = 'get';
      return new Promise((resolve, reject) => {
        this.$emit('change', {
          type: 'change',
          direction: this.direction,
          success: () => {
            resolve(this.direction);
          },
        });
      });
    },
    // 商品列表展示
    rendering() {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve();
          this.status = 'render';
          this.$emit('finish', { type: 'finish' });
        }, 50);
      });
    },
    // 切换箱子后 运行
    running() {
      if (this.status == 'normal') {
        this.switching = true;
        this.mask = true;
        this.getData().then((res) => {
          this.goods.name = res;
          this.switching = false;
          this.mask = false;
        });
      }
    },
    openBoxList() {
      this.$emit('open', true);
    },
  },
};
</script>
<style lang="scss" scoped>
.goods-group-container {
  position: relative;
  z-index: 5;
  width: 100%;
  // overflow-x: hidden;
  // overflow-y: visible;
  height: 100%;
  transition: all 0.6s;
  animation: fade 1s linear 0s 1 normal none;
  view image {
    max-width: none;
  }

  // &::before {
  //   position: absolute;
  //   top: -70rpx;
  //   left: 0;
  //   content: '';
  //   display: block;
  //   border-radius: 20rpx 20rpx 0 0;
  //   width: 100vw;
  //   height: 120rpx;
  //   background-color: #fff;
  // }
  // &::after {
  //   position: absolute;
  //   bottom: -260rpx;
  //   left: 0;
  //   width: 100%;
  //   text-align: center;
  //   z-index: -1;
  //   display: block;
  //   content: '喵~,😿不要再偷看我';
  // }

  // .bg {
  //   position: absolute;
  //   top: -70rpx;
  //   left: 0;
  //   z-index: 1;
  //   box-sizing: content-box;
  //   width: 100%;
  //   border-radius: 20rpx 20rpx 0 0;
  //   padding: 70rpx 0;
  //   height: 100%;
  //   background-image: radial-gradient(at 60% 50%, #bebef0 15%, #f2e6f7);
  //   opacity: 0.6;
  //   transition: all 0.6s;
  // }
  .content {
    position: relative;
    z-index: 6;
    padding-top: 34rpx;
    width: 100%;
    height: 100%;
  }
  .goods-mask {
    display: flex;
    justify-content: center;
    align-items: center;

    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background-color: rgba(255, 255, 255, 0.2);
    z-index: 10;
  }

  .goods-group-main {
    position: relative;
    padding: 0 8rpx;
    width: 100%;
    height: 100%;
    overflow: hidden;

    // &::after {
    //   content: '';
    //   position: absolute;
    //   bottom: 0;
    //   left: 0;
    //   width: 100%;
    //   height: 0;
    //   box-shadow: 0 0rpx 10rpx 10rpx #f2e6f7;
    // }
  }
  .swiper-goods-group.opacity {
    opacity: 0;
  }
  .group-ske,
  .swiper-goods-group,
  .swiper-item {
    width: 100%;
    height: 100%;
  }
}
.list {
  margin: 0 auto;
  // width: calc(228rpx * 3 + 16rpx * 2);
  width: 100%;
  height: 100%;
  transition: all 1s;
  animation: text-focus-in 1s linear 0s 1 normal none;
  // background-color: #fff;
  .goods-scroll {
    width: 100%;
    height: 100%;
  }

  .goods-list {
    padding-bottom: 100rpx;
    display: flex;
    flex-wrap: wrap;
    // .card-good:nth-child(4n) {
    //   margin-right: 0;
    // }
    .card-good {
      margin: 0 3.2rpx 7rpx 3.2rpx;
    }
  }
}

.small-ske {
  transform: scale(0.96);
  transition: all 1s;
}
@keyframes progress-bar-stripes {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 30rpx 0;
  }
}
</style>
